<template>
  <div ref="dom" class="charts chart-bar" style="height:100%"></div>
</template>

<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
// import { on, off } from '@/libs/tools'
echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartBar',
  props: {
    value: Array,
    time:Array,
    show:Boolean,
    text: String,
    subtext: String
  },
  data () {
    return {
      dom: null,
    }
  },
  methods: {
    resize () {
      this.dom.resize()
    },
    drawPie(){
       
    this.$nextTick(() => {
      // let xAxisData = Object.keys(this.value)
      // let seriesData = Object.values(this.value)
      var posList = [
    'left', 'right', 'top', 'bottom',
    'inside',
    'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
    'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
];

let app = {}
app.config = {
    rotate: 90,
    align: 'left',
    verticalAlign: 'middle',
    position: 'insideBottom',
    distance: 15,
    onChange: function () {
        var labelOption = {
            normal: {
                rotate: app.config.rotate,
                align: app.config.align,
                verticalAlign: app.config.verticalAlign,
                position: app.config.position,
                distance: app.config.distance
            }
        };
        myChart.setOption({
            series: [{
                label: labelOption
            }, {
                label: labelOption
            }, {
                label: labelOption
            }, {
                label: labelOption
            }]
        });
    }
};


var labelOption = {
    show: true,
    position: app.config.position,
    distance: app.config.distance,
    align: app.config.align,
    verticalAlign: app.config.verticalAlign,
    rotate: app.config.rotate,
    formatter: '{c}  {name|{a}}',
    fontSize: 16,
    rich: {
        name: {
            textBorderColor: '#fff'
        }
    }
};
let option = {
    title:{x: 'center',subtext: this.subtext,},
    color: [ '#007aff'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['交易额增长趋势','本月发货量排名'],
        bottom:'bottom',
        show:false
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        // feature: {
        //     mark: {show: true},
        //     dataView: {show: true, readOnly: false},
        //     magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
        //     restore: {show: true},
        //     saveAsImage: {show: true}
        // }
    },
    xAxis: [
        {
            type: 'category',
            axisTick: {show: false},
            data: this.time,
            splitLine:{
              show:false
            },
            axisLabel: {  
              interval:0,  
              fontSize:10,
              rotate:25,
              textStyle: {
                  color: '#fff'   //这里用参数代替了
                }  
            }  
        },
    ],
    yAxis: [
        {
            type: 'value',
            name:this.text,
            splitLine:{
              show:false
            },
            axisLabel: {
                  show: this.show,//不显示坐标轴上的文字
                  textStyle: {
                  color: '#fff'   //这里用参数代替了
                },
            },
            axisLine: {
                  show: this.show,//不显示坐标轴线
            },
        },
        
    ],
    series: this.value
};
      this.dom = echarts.init(this.$refs.dom, 'tdTheme')
      this.dom.setOption(option)
    })
    }
  },
  mounted () {
     this.drawPie()
    
  },
  watch: {
      value: {
        handler(newValue) {
          this.value = newValue;  //把新值赋值给属性
          this.drawPie();  //刷新echarts图表
        },
        deep: true
      }
  },
  beforeDestroy () {
  }
}
</script>
